<script setup lang="ts" name="MainPad">
import IconDS from '@/assets/images/icon_deepseek.png'
import IconDB from '@/assets/images/icon_doubao.png'
/*========================================>( 模型属性 )<========================================*/
//主面板的可见性
const boxVisiable = ref<boolean>(true)
//动画类
const animationClass = ref<'showAnimation' | 'hideAnimation' | ''>('')

/*========================================>( 作用域属性 )<========================================*/
//功能列表
const _btnList = [
	{
		name: 'DeepSeek',
		img: IconDS,
		id: 'ModuleDeepseek'
	},
	{
		name: 'DouBao',
		img: IconDB,
		id: 'ModuleDouBao'
	},
	{
		name: '网页常用颜色',
		icon: 'icon-addd',
		id: 'ModuleWebColor'
	},
	{
		name: '字符串工具',
		icon: 'icon-zifuchuan',
		id: 'ModuleStrEdit'
	},
	{
		name: '番茄钟',
		icon: 'icon-fanqieshijian',
		id: 'ModuleClockTomato'
	},
	{
		name: '图像处理器',
		icon: 'icon-tianjiantuxiang',
		id: 'ModuleImgEdit'
	},
	// {
	// 	name: '计算器',
	// 	icon: 'icon-calculator',
	// 	id: 'ModuleCalculator'
	// }
	{
		name: '批量计时器',
		icon: 'icon-dealt',
		id: 'ModuleCoc'
	},
]

/*========================================>( dom属性 )<========================================*/
const domMainPad = ref()

/*========================================>( 普通方法 )<========================================*/
const showBox = () => {
	boxVisiable.value = true
	window.ipcRenderer.send('MAIN-PAD-VISIABLE', 'show')
	animationClass.value = 'showAnimation'
}
const hideBox = () => {
	animationClass.value = 'hideAnimation'
	setTimeout(() => {
		boxVisiable.value = false
		window.ipcRenderer.send('MAIN-PAD-VISIABLE', 'hide')
	}, 230)
}
/*========================================>( 监听方法 )<========================================*/
const handleOpenUtil = (id: string) => {
	window.ipcRenderer.send('GENERAL-OPEN-WINDOW', { id })
}

/*========================================>( 钩子 )<========================================*/
onMounted(() => {
	//加载鼠标移出移入显示隐藏的监听
	domMainPad.value?.addEventListener('mouseenter', () => {
		//移入，显示pad
		showBox()
	})
	domMainPad.value?.addEventListener('mouseleave', () => {
		//移出，隐藏pad
		hideBox()
	})
	setTimeout(() => {
		hideBox()
	}, 600)
})
</script>
<template>
	<div ref="domMainPad" class="main-content main-pad">
		<div :class="animationClass" class="btn-box" v-show="boxVisiable">
			<div class="btn" v-for="item, index in _btnList" :key="index" @click="handleOpenUtil(item.id)">
				<img v-if="item.img" :src="item.img" />
				<svg v-else class="iconfont" aria-hidden="true">
					<use :xlink:href="'#' + item.icon"></use>
				</svg>
			</div>
		</div>
	</div>
</template>
<style lang="scss">
.main-content.main-pad {
	width: 66px;
	height: 100%;
	overflow: hidden;

	.btn-box {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		border: solid 1px rgba(0, 0, 0, 0.3);
		border-radius: 0 10px 10px 0;

		.btn {
			box-sizing: border-box;
			width: 50px;
			height: 50px;
			margin: 8px;
			text-align: center;
			line-height: 50px;
			cursor: pointer;

			img {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin: 0 5px;
			}

			.iconfont {
				width: 40px;
				height: 40px;
				margin: 0 5px;
				fill: currentColor;
				overflow: hidden;
			}

			&:hover {

				.iconfont,
				img {
					width: 44px;
					height: 44px;
					margin: 3px;
				}
			}
		}
	}
}
</style>
<style lang="scss" scoped>
/* 定义动画序列 */
@keyframes hideToLeft {
	0% {
		transform: translateX(0);
	}

	/* 初始状态不变化 */
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}

	/* 最终状态向左平移100%并完全透明度为0 */
}

/* 定义动画序列 */
@keyframes showToRight {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	/* 初始状态不变化 */
	100% {
		transform: translateX(0);
	}

	/* 最终状态向左平移100%并完全透明度为0 */
}


.hideAnimation {
	animation-name: hideToLeft;
	animation-duration: 0.3s;
	animation-timing-function: linear;
}

.showAnimation {
	animation-name: showToRight;
	animation-duration: 0.3s;
	animation-timing-function: linear;
}
</style>
